<template>
  <div>
    <p>App1组件</p>
    <p>{{ userinfo.username }}--{{ userinfo.age }}--{{ userinfo.sex }}</p>
    <p><button @click="addSex">添加性别</button></p>

    <ul>
      <li v-for="item in namelist" :key="item">{{ item }}</li>
    </ul>
    <p><button @click="editname">修改姓名</button></p>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "",
  props: [""],
  data() {
    return {
      userinfo: {
        username: "酱爆",
        age: 20,
      },
    };
  },
  methods: {
    addSex() {
      // this.userinfo.sex = "男";
      this.$set(this.userinfo, "sex", "男");
    },
  },
  setup() {
    let namelist = reactive(["包租婆", "包租公", "洪家铁线拳"]);
    console.log(namelist);
    const editname = () => {
      namelist[2] = "五郎八卦棍";
    };
    return {
      namelist,
      editname,
    };
  },
};
</script>
<style scoped>
</style>